// components/recipe/index.js
import factor from '../../api/factor';
import factorApi from '../../api/factor';
import {
  useDialog
} from '../../miniprogram_npm/miniprogram-vc-components/dialog/useDialog';
let dialog;
Component({
  options: {
    pureDataPattern: /^_/
  },
  /**
   * 组件的属性列表
   */
  properties: {
    root: {
      type: Boolean,
      observer(value) {
        this.setData({
          isRoot: value
        })
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    _title: '因子模板列表',
    columnsList: [],
    refresh: false,
    onLoading: false,
    total: 0,
    page: {
      currentPage: 1,
      size: 10,
      sortNumber: {
        column: 'createTime',
        asc: false
      }
    },
    name: '',
    isFocus: false,
  },

  /**
   * 组件的方法列表
   */
  methods: {

    onAddPF(event) {
      wx.navigateTo({
        url: '../factor/index',
      })
    },
    toEddit(event) {
      const id = event.currentTarget.dataset.item.id;
      wx.navigateTo({
        url: '../factor/index?id=' + id,
      })
    },
    onClear() {
      this.setData({
        name: '',
        page: {
          currentPage: 1,
          size: 10
        }
      })
      this.fetchFactorList()
    },
    onEnabled(event) {
      const {
        id
      } = event.currentTarget.dataset;
      const _this = this;
      let dialogInstance = dialog.init({
        title: '提示',
        content: '是否要应用该模板?',
        mask: true,
        showCancel: true
      }, () => {
        factor.setEnable({
          id
        }, () => {
          _this.setData({
            columnsList: _this.data.columnsList.map(it => {
              return {
                ...it,
                enabled: it.id === id
              }
            })
          })
          dialogInstance.close();
        })
      }, () => {
        dialogInstance.close()
      })
      dialogInstance.open();
    },
    onCancel() {
      let dialogInstance = dialog.init({
        icon: "icon-warning",
        title: "提示",
        content: "应用另一个模板后将自动取消对此模板的应用",
        showCancel: false,
        mask: true
      }, () => dialogInstance.close())
      dialogInstance.open();
    },
    /**
     * 配方列表
     */
    fetchFactorList() {
      factorApi.searchtFactor({
        name: this.data.name,
        ...this.data.page
      }, (e) => {
        this.setData({
          columnsList: e.records,
          total: e.total
        })
      })
    },
    delectItem(event) {
      const _this = this;
      const value = event.currentTarget.dataset.value;
      if (!value.enabled) {
        let dialogInstance = dialog.init({
          title: '提示',
          content: '确定要删除吗？',
          mask: true,
          showCancel: true
        }, () => {
          _this.delect(value);
          dialogInstance.close();
        }, () => {
          dialogInstance.close()
        }) 
        dialogInstance.open();
      } else {
        let dialogInstance = dialog.init({
          icon: "icon-warning",
          title: "提示",
          content: "删除之前请先解除对此模板的应用",
          showCancel: false,
          mask: true
        }, () => dialogInstance.close())  
        dialogInstance.open();
      }
    },
    delect(target) {
      factorApi.removeFactor(target, () => {
        this.setData({
          columnsList: this.data.columnsList.filter(it => {
            return it.id !== target.id
          })
        })
      })
    },
    onRefresh() {
      this.setData({
        refresh: true,
        page: {
          ...this.data.page,
          currentPage: 1
        }
      })
      this.fetchFactorList();
      setTimeout(() => {
        this.setData({
          refresh: false
        })
      }, 1200)
    },
    onRefreshEnd() {
      this.setData({
        refresh: false
      })
    },
    onScrollLoad() {
      if (this.data.total > this.data.columnsList.length) {
        this.setData({
          onLoading: true,
          page: {
            ...this.data.page,
            currentPage: this.data.page.currentPage + 1
          }
        })
        this.loadData();
        setTimeout(() => {
          this.setData({
            onLoading: false
          })
        }, 1200)
      }
    },
    loadData() {
      factorApi.recipeSearch(this.data.page, (e) => {
        this.setData({
          columnsList: [...this.data.columnsList, ...e.records],
          total: e.total,
          page: {
            ...this.data.page,
            currentPage: e.current
          }
        })
      }, function (e) {
        Toast({
          message: e,
          position: 'bottom'
        });
      })
    },
    inputChange(event) {
      this.setData({
        name: event.detail
      })
    },
    onSearch() {
      this.setData({
        name: this.data.name,
        page: {
          currentPage: 1,
          size: 10,
          sortNumber: {
            column: 'createTime',
            asc: false
          }
        }
      })
      this.fetchFactorList();
    },


    onFocus() {
      this.setData({
        isFocus: true
      })
    },
    onBlur() {
      this.setData({
        isFocus: false
      })
    }
  },
  pageLifetimes: {
    show() {
      this.setData({
        total: 0,
        page: {
          currentPage: 1,
          size: 10,
          sortNumber: {
            column: 'createTime',
            asc: false
          }
        },
        name: ''
      })
      this.fetchFactorList();
      wx.setNavigationBarTitle({
        title: this.data._title,
      })
    },

  },
  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
      dialog = useDialog('#dialog', this);
    }
  },
})